<script lang="ts" setup name="QuickMark">
import { onMounted, reactive, ref } from "vue";
import { ElForm, ElMessage } from "element-plus";
import { getCloudPrintDetail, createQuickMarkAPI } from "@/api/modules/operation";
import { Detail, QuickMark } from "@/api/interface/detail";
import LaiHeader from "@/components/lai-header/index.vue";
import { downloadFile } from "@/utils/downLoad";

const formData = reactive<QuickMark.CloudPrintDetail>({
  downLoadList: [],
  createCount: 0,
  bindingCount: 0,
  count: 0
});

const rules = reactive<any>({
  count: [
    {
      required: true,
      message: "请输入云二维码数量"
    }
  ]
});
const formRef = ref<InstanceType<typeof ElForm> | null>(null);

// 创建二维码
const createQuickMark = async () => {
  await formRef.value!.validate();
  const res = await createQuickMarkAPI({ count: formData.count });
  ElMessage({
    message: res.msg,
    type: "success"
  });
  if (res.data as string) {
    downloadFile(res.data as string, "example.zip");
  }
  getCloudPrint();
};

const getCloudPrint = async () => {
  const res = await getCloudPrintDetail();
  Object.keys(formData).forEach(key => {
    if (res.data.hasOwnProperty(key)) {
      formData[key] = res.data[key];
    }
  });
};
onMounted(() => {
  getCloudPrint();
});
</script>

<template>
  <div class="QuickMark-container">
    <LaiHeader title="云二维码" :height="70"></LaiHeader>
    <div class="form">
      <el-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        style="width: 60%"
        label-width="150px"
        label-position="right"
        label-suffix="："
      >
        <el-form-item label="已发放数量">
          <el-input-number disabled :controls="false" v-model="formData.createCount"></el-input-number>
        </el-form-item>
        <el-form-item label="已绑定数量">
          <el-input-number disabled :controls="false" v-model="formData.bindingCount"></el-input-number>
        </el-form-item>
        <el-form-item label="下载云二维码">
          <div style="margin-left: 20px" v-for="item in formData.downLoadList" :key="item.name">
            <a :href="item.url">{{ item.name }}</a>
          </div>
        </el-form-item>
        <el-form-item label="云二维码数量" prop="count">
          <el-input-number :min="1" :controls="false" v-model="formData.count"></el-input-number>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="createQuickMark">立即创建</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style lang="scss" scoped>
div {
  box-sizing: border-box;
}
.QuickMark-container {
  height: 100%;
  .form {
    width: 100%;
    height: calc(100% - 90px);
    padding: 30px;
    margin-top: 20px;
    overflow: auto;
    background-color: #ffffff;
    a {
      margin-top: 10px;
      text-decoration: none;
    }
  }
}
</style>
